<template>
  <div>
    <basic-container>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>任务管理</el-breadcrumb-item>
        <el-breadcrumb-item>任务库</el-breadcrumb-item>
      </el-breadcrumb>
    </basic-container>
    <basic-container>
      <avue-crud
        :table-loading="loading"
        ref="crud"
        :data="data"
        v-model="form"
        :option="option"
        :defaults.sync="defaults"
        :page.sync="page"
        @on-load="getList"
        @refresh-change="refreshChange"
        @search-reset="from = {}"
        @search-change="searchChange"
        @row-update="rowUpdate"
        @row-del="rowDel"
        @row-save="rowSave"
      >
        <template slot-scope="scope" slot="last_operation_info">
          <div class="authorId">
            {{ scope.row.edit_time }}
            <el-tag>{{ scope.row.edit_account_name }}</el-tag>
          </div>
        </template>
        <!-- 任务简介 -->
        <template slot-scope="scope" slot="task_introduce">
          <el-row
            justify="center"
            v-if="
              scope.row.task_introduce != undefined &&
              scope.row.task_introduce.trim().length != 0
            "
          >
            <el-descriptions-item>{{
              scope.row.task_introduce
            }}</el-descriptions-item>
          </el-row>
          <el-row justify="center">
            <el-button
              icon="el-icon-circle-plus"
              type="text"
              size="small"
              @click.stop="rowEdit(scope.row)"
              v-if="
                scope.row.task_introduce == undefined ||
                scope.row.task_introduce.trim().length == 0
              "
            >
              <font>添加文案</font>
            </el-button>
            <el-button
              icon="el-icon-s-order"
              type="text"
              size="small"
              style="color: red"
              @click.stop="getMultilingualDetail(scope.row)"
              v-else-if="scope.row.multilingual == 0"
            >
              <font>配置未完善</font>
            </el-button>
            <el-button
              icon="el-icon-s-order"
              type="text"
              size="small"
              @click.stop="getMultilingualDetail(scope.row)"
              v-else
            >
              <font>配置多语言文本</font>
            </el-button>
          </el-row>
        </template>
      </avue-crud>
    </basic-container>
    <!-- 弹出框 -->
    <el-dialog
      title="多语言文本配置"
      :visible.sync="multilingualDialogVisible"
      :append-to-body="true"
    >
      <el-form :model="multilingual_data" label-width="120px">
        <el-form-item label="文本说明：">
          <el-descriptions-item>{{
            multilingual_data.txt
          }}</el-descriptions-item>
        </el-form-item>

        <el-form-item label="动态文本：">
          <el-select
            v-model="multilingual_data.dynamic_able"
            placeholder="请选择是否为动态文本"
          >
            <el-option label="否" :value="0"></el-option>
            <el-option label="是" :value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="英语文本：" prop="bookIntro">
          <el-input
            type="textarea"
            v-model="multilingual_data.en_txt"
            placeholder="请输入英语文本"
          ></el-input>
        </el-form-item>

        <el-form-item label="芬兰语文本：" prop="bookIntro">
          <el-input
            type="textarea"
            v-model="multilingual_data.fn_txt"
            placeholder="请输入芬兰语文本"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="multilingualDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateMultilingual()"
          >修 改</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { common } from "@/api/cat/httpRequest";
import { catUrl } from "@/config/env";
import { selectVersion } from "@/api/cat/baseUrls";
import {
  appTaskLibrary as baseURL,
  appConfigDefaultTxt,
} from "@/api/cat/baseUrls";

export default {
  data() {
    return {
      radio: "1",
      resData: "",
      userInfo: this.$store.state.user.userInfo,
      defaults: {},
      loading: false,
      page: {
        total: 0,
        pageSize: 10,
      },
      type: true,
      data: [],
      multilingualDialogVisible: false,
      multilingual_data: {
        txt: "",
        use_area: 1,
        dynamic_able: 0,
        config_complete: 0,
        en_txt: "",
        fn_txt: "",
      },
      params: {},
      form: {},
      default: {
        orderByList: "edit_time&DESC",
      },
      option: {
        index: false,
        indexLabel: "序号",
        border: true,
        column: [
          {
            label: "任务ID",
            prop: "id",
            type: "input",
            addDisplay: false,
            editDisplay: false,
          },
          {
            label: "任务类型",
            prop: "task_type",
            type: "select",
            span: 24,
            row: true,
            search: true,
            dicData: [
              {
                label: "Daily Tasks",
                value: 0,
              },
              {
                label: "Tasks For Newcomers",
                value: 1,
              },
              {
                label: "Today's Reading Challenge",
                value: 2,
              },
            ],
            change: (v) => {
              if (v.value == 0) {
                this.option.column[3].dicData = [
                  { label: "Post a comment", value: 3 },
                  { label: "Unlock 5 chapters", value: 4 },
                  { label: "Purchase coins once or premium", value: 5 },
                ];
                this.option.column[2].addDisplay = false;
                this.option.column[2].editDisplay = false;
              } else if (v.value == 1) {
                this.option.column[3].dicData = [
                  { label: "Log inFishNovel", value: 1 },
                  { label: "Set your reading preference", value: 2 },
                ];
                this.option.column[2].addDisplay = false;
                this.option.column[2].editDisplay = false;
              } else if (v.value == 2) {
                this.option.column[3].dicData = [
                  { label: "Today's Reading Challenge", value: 0 },
                ];
                this.option.column[2].addDisplay = true;
                this.option.column[2].editDisplay = true;
              }
            },
            rules: [
              {
                required: true,
                message: "任务类型必须选择",
              },
            ],
          },
          {
            label: "阅读时长",
            prop: "read_time_num",
            type: "number",
            span: 24,
            addDisplay: false,
            editDisplay: false,
            rules: [
              {
                required: true,
                message: "阅读时长必须填写",
              },
            ],
          },
          {
            label: "任务名称",
            prop: "task_name_type",
            type: "select",
            span: 24,
            dicData: [],
            rules: [
              {
                required: true,
                message: "任务名称必须选择",
              },
            ],
          },
          {
            label: "任务简介",
            prop: "task_introduce",
            type: "textarea",
            span: 24,
            slot: true,
            rules: [
              {
                required: true,
                message: "任务简介必须填写",
              },
            ],
          },
          {
            label: "奖励类型",
            prop: "reward_type",
            type: "select",
            search: true,
            span: 24,
            row: true,
            dicData: [
              {
                label: "Coins",
                value: 0,
              },
              {
                label: "Bonus",
                value: 1,
              },
            ],
            rules: [
              {
                required: true,
                message: "奖励类型必须选择",
              },
            ],
          },
          {
            label: "任务奖励",
            prop: "reward_num",
            type: "number",
            rules: [
              {
                required: true,
                message: "任务奖励必须填写",
              },
            ],
          },
          {
            label: "最后操作信息",
            prop: "last_operation_info",
            type: "input",
            slot: true,
            addDisplay: false,
            editDisplay: false,
            addDisabled: true,
            editDisabled: true,
          },
        ],
      },
    };
  },
  methods: {
    /**设置默认值 */
    setDicData() {
      this.option.column[3].dicData = [
        { label: "Today's Reading Challenge", value: 0 },
        { label: "Log inFishNovel", value: 1 },
        { label: "Set your reading preference", value: 2 },
        { label: "Post a comment", value: 3 },
        { label: "Unlock 5 chapters", value: 4 },
        { label: "Purchase coins once or premium", value: 5 },
      ];
    },
    /**获取列表 */
    async getList() {
      this.loading = true;
      //清空表格列表
      this.data = [];
      //发送请求获取数据
      let response = await common(
        baseURL.page,
        { ...this.default, ...this.params },
        this.page,
        "POST"
      );
      this.page = response.page;
      for (let index in response.data) {
        let row = response.data[index];
        if (
          row.task_introduce == undefined ||
          row.task_introduce.trim().length == 0
        ) {
          row.multilingual = -1;
        } else {
          let multilingualConfig = await common(
            `${appConfigDefaultTxt.selectAppConfigDefaultTxt}?txt=${row.task_introduce}&showDetail=false`,
            null,
            null,
            "GET"
          );
          if (multilingualConfig.data.config_complete == 1) {
            row.multilingual = 1;
          } else {
            row.multilingual = 0;
          }
        }
      }
      this.data = response.data;
      this.loading = false;
      this.setDicData();
    },
    /**保存 */
    async rowSave(row, done, loading) {
      delete row["id"];
      let userInfo = this.$store.state.user.userInfo;
      row.edit_account_id = userInfo.id;
      row.edit_account_name = userInfo.username;
      let data = await common(baseURL.add, row, null, "POST");
      if (data == null) {
        loading();
        return;
      }
      this.getList();
      done();
    },
    /**编辑 */
    rowEdit(row) {
      this.$refs.crud.rowEdit(row, row.$index);
    },
    /**修改 */
    async rowUpdate(row, index, done, loading) {
      let userInfo = this.$store.state.user.userInfo;
      row.edit_account_id = userInfo.id;
      row.edit_account_name = userInfo.username;
      let res = await common(baseURL.update, row, null, "PUT");
      if (res == null) {
        loading();
        return;
      }
      this.getList();
      done();
    },
    /**刷新 */
    refreshChange() {
      this.getList();
    },
    /**删除 */
    rowDel(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        type: "warning",
      })
        .then(async () => {
          let userInfo = this.$store.state.user.userInfo;
          let response = await common(
            `${baseURL.del}?id=${row.id}&userId=${userInfo.id}&userName=${userInfo.username}`,
            {},
            null,
            "DELETE"
          );
        })
        .then(() => {
          this.getList();
        });
    },
    /**刷新 */
    refreshChange() {
      this.getList();
    },
    /**搜索 */
    searchChange(params, done) {
      console.log(params, "params");
      params.push_time = `${params.push_time ? "!<>!" + params.push_time : ""}`;
      // params.edit_account =  '%'+params.edit_account+'%' //模糊搜索
      delete params.push_time;
      this.params = params;
      this.page.currentPage = 1;
      this.getList();
      if (done) done();
    },
    /**获取多语言配置 */
    async getMultilingualDetail(row) {
      let updateTxt = row.task_introduce;
      let multilingual_res = await common(
        `${appConfigDefaultTxt.selectAppConfigDefaultTxt}?txt=${updateTxt}&showDetail=true`,
        null,
        null,
        "GET"
      );
      if (
        multilingual_res.data == undefined ||
        multilingual_res.data.id == undefined
      ) {
        this.multilingual_data = {
          txt: updateTxt,
          use_area: 1,
          dynamic_able: 0,
          config_complete: 0,
          en_txt: "",
          fn_txt: "",
          type: "add",
          rowId: row.id,
        };
      } else {
        this.multilingual_data = multilingual_res.data;
        this.multilingual_data.type = "edit";
        this.multilingual_data.rowId = row.id;
      }
      this.multilingualDialogVisible = true;
    },
    /**修改多语言配置 */
    async updateMultilingual() {
      let userInfo = this.$store.state.user.userInfo;
      let edit_admin_id = userInfo.id;
      let edit_admin_name = userInfo.username;
      let update;
      if (this.multilingual_data.type == "add") {
        update = await common(
          appConfigDefaultTxt.save,
          { ...this.multilingual_data, edit_admin_id, edit_admin_name },
          null,
          "POST"
        );
      } else {
        update = await common(
          appConfigDefaultTxt.update,
          { ...this.multilingual_data, edit_admin_id, edit_admin_name },
          null,
          "POST"
        );
      }
      if (update.code == 1) {
        this.data.forEach((item) => {
          if (item.id == this.multilingual_data.rowId) {
            item.multilingual = update.data.config_complete;
          }
        });
        this.multilingualDialogVisible = false;
      }
    },
  },
  mounted() {},
};
</script>
<style scoped>
.authorId {
  display: flex;
}
.nameTitle {
  width: 120px;
}
</style>